<script setup lang="ts">
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useSearchBoxStore } from '@/store/modules/search'
import { useRouter } from 'vue-router'

const searchStore = useSearchBoxStore()
// const { searchHospital } = storeToRefs(searchStore)

const { searchHospital } = storeToRefs(searchStore)

const hosname = ref<string>('')

const $router = useRouter()
const goHospitalDetail = (item: any) => {
  $router.push({ path: '/hospital/register', query: { hoscode: item.hoscode } })
}
const hospitalRes = (hosname: string) => {
  searchStore.fecthSearchHospitalByNameAction(hosname)
  // hospitalData.value = searchHospital
}
const fecthHospitalList = (keywords: string, cb: any) => {
  hospitalRes(keywords)
  const results = searchHospital.value.map((item: any) => ({
    value: item.hosname,
    hoscode: item.hoscode
  }))
  cb(results)
}
</script>
<template>
  <div class="search-box">
    <el-autocomplete
      v-model="hosname"
      placeholder="点击输入医院名称"
      :trigger-on-focus="false"
      clearable
      :fetch-suggestions="fecthHospitalList"
      @select="goHospitalDetail"
    >
      <template #prefix>
        <el-icon>
          <Search />
        </el-icon>
      </template>
      <template #suffix>
        <el-button type="primary" link>搜索</el-button>
      </template>
    </el-autocomplete>
  </div>
</template>
<style scoped lang="less">
.search-box {
  height: 60px;
  width: 100%;
  line-height: 60px;

  :deep(.el-autocomplete) {
    width: 100%;
  }

  :deep(.el-input__wrapper) {
    box-shadow: none;
    font-size: 16px;
    border-bottom: 1px solid #eee;

    &:hover {
      border-bottom: 1px solid #ddd;
    }
  }

  :deep(.el-input__inner) {
    height: 60px;
    font-size: 16px;
    color: var(--title-text-color);
  }

  :deep(.el-button > span) {
    font-size: 16px;
    color: var(--primary-color);

    &:hover {
      color: var(--text-hover-color);
    }
  }
}
</style>
